<%@page pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TouchingFish</title>
    <%--<script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.2.1.js"></script>--%>
    <script src="${path}/goEasy-js/goeasy-1.2.1.js"></script>
    <script src="${path}/bootstrap/js/jquery.min.js"></script>
    <script>


        var goeasy = GoEasy.getInstance({
            host:'hangzhou.goeasy.io', //应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
            appkey: "BC-5a4885f2a4314398b5a8ca11617e321c" //替换为您的应用appkey
        });
        goeasy.connect({
            onSuccess: function () {  //连接成功
                console.log("GoEasy connect successfully.") //连接成功
            },
            onFailed: function (error) { //连接失败
                console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
            },
            onProgress:function(attempts) { //连接或自动重连中
                console.log("GoEasy is connecting", attempts);
            }
        });
        $(function (){
            var content;
            goeasy.subscribe({
                channel: "chatroom",//替换为您自己的channel
                onMessage: function (message) {
                    console.log("Channel:" + message.channel + " content:" + message.content);
                    //接收别人发送的内容到左侧
                    //判断是不是自己发的消息
                    if (content != message.content){
                        $("#showMsg").append("<br/><span style='background-color: #419641;float: left;border-radius: 40px'>"+message.content+"<span><br/>");
                    }
                },
                onSuccess: function () {
                    console.log("Channel订阅成功。");

                },
                onFailed: function (error) {
                    console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
                }
            });

            //单击发送按钮触发
            $("#sendMsg").click(function (){
                //获取输入框内容
                var message = $("#msg").val();
                //alert(message);
                goeasy.publish({
                    channel: "chatroom",//替换为您自己的channel
                    message: message,//替换为您想要发送的消息内容
                    onSuccess:function(){
                        console.log("消息发布成功。");
                        content = message;
                        //清空m输入框
                        $("#msg").val("");
                        $("#showMsg").append("<br/><span style='background-color: #4297d7;float: right;border-radius: 40px'>"+message+"<span>");
                    },
                    onFailed: function (error) {
                        console.log("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
                    }
                });
            });
        });






    </script>
</head>
<body>
    <div align="center">
        <h1>管理员欢乐摸鱼群</h1>
        <%--聊天总窗口--%>
        <div style="width: 1000px;height: 1000px;border: #419641 3px solid">
            <%--聊天内容展示区域--%>
                <br/>
            <div id="showMsg" style="width: 800px;height: 600px;border: #28a4c9 2px solid">
            </div>
                <br/><br/><br/><br/>
                <%--聊天编辑发送区域--%>
            <div style="width: 800px;height: 200px;border: #101010 1px solid">
                <%--发送框--%>
                <input id="msg" type="text" style="width:700px;height: 150px"/>
                <%--提交框--%>
                <button id="sendMsg" style="width:100px;height: 25px">发送</button>
            </div>
        </div>
    </div>
</body>
</html>